Tengo un carrusel de Bootstrap 4 y le he dado este atributo data-keyboard="true"
Sin embargo, la navegación con el teclado no funciona. Ni siquiera cuando se enfoca primero en el carrusel con el mouse.
Me gustaría que el carrusel funcione con el teclado directamente al cargar la página.
este es mi codigo
<?php if( have_rows('photos') ): ?> <div class="carousel_bg"> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-keyboard="true"> <!-- Indicators --> <ol class="carousel-indicators"> <?php $active = 'active'; $num = 0; while ( have_rows('photos') ) : the_row(); $photo = get_sub_field('photo'); if($photo == "" ) continue; ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li> <?php $active = ''; $num += 1; endwhile; ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php $active = 'active'; while ( have_rows('photos') ) : the_row(); $photo = get_sub_field('photo'); if($photo == "" ) continue; ?> <div class="carousel-item <?php echo $active ?> screen08"> <div class="container"> <img src="<?php echo get_template_directory_uri(); ?>/files/photos/<?php the_sub_field('photo'); ?>" class="img-fluid is-slider-item" /> </div> </div><!-- /item --> <?php $active = ''; endwhile; ?> </div> </div> </div> </div><!-- /row --> <?php endif; ?>La biblioteca Bootstrap 4 js se carga correctamente...
¿Alguna pista?
¡Gracias por adelantado!
No estoy 100% seguro de esto, pero ¿podría ser que la información del teclado de datos deba adjuntarse al elemento de carrusel en lugar de carrusel-ejemplo-genérico ? Solo algo para probar.
Después de pensar....
Bien, observo cierta documentación incorrecta en GetBootstrap. En Bootstrap 5 está destinado a ser data-bs-keyboard no data-keyboard .
Vale la pena intentarlo :)